<template>
  <div  id="chooseGenderComponent">
    <group>
       <cell v-model="gender" title="性别"   is-link @click.native="chooseGender = true" :class="{'active':gender!='请选择性别'}"></cell>
    </group>
    <div v-transfer-dom class="transfer-dom" >
      <x-dialog :show.sync = 'chooseGender' class="dialog" hide-on-blur >
        <div class="top">
          <p class="choose">性别选择</p>
          <img src="static/image/public/closeIcon.png" alt="closeIcon" @click="chooseGender = false" class="close">
        </div>
        <div class="gender-select">
          <div class="male" @click=" changeMaleStatus">
            <img v-if="maleSelected" src="static/image/public/maleSelect.png" alt="男-选中" >
            <img v-else src="static/image/public/male.png" alt="男-未选中" >
            <p>男</p>
          </div>
          <div class="female" @click=" changeFemaleStatus">
            <img  v-if="femaleSelected" src="static/image/public/femaleSelect.png" alt="女-选中" >
            <img v-else  src="static/image/public/female.png" alt="女-未选中">
            <p>女</p>
          </div>
        </div>
        <div class="confirm-btn" @click="changeGender">
          <p>确定</p>
        </div>
      </x-dialog>
    </div>
  </div>
</template>
<script>
import { Cell,Group,XDialog,TransferDomDirective as TransferDom,XButton } from 'vux' 
export default {
  directives:{
    TransferDom
  },
  data() {
    return {
      gender: '',
      chooseGender: false,
      genderSelected: undefined,
      maleSelected: undefined,
      femaleSelected: undefined
    }
  },
  components: {
    Group,
    Cell,
    XDialog,
    XButton
  },
  props: {
    value:{
      type: Number,
      default: 0
    },
  },
  watch:{
    value:function(val){
      switch (val) {
        case 1:
          this.gender = '男'
          this. maleSelected = true
          break;
        case 2:
          this.gender = '女'
          this.femaleSelected = true
          break;
        default:
          this.gender = '请选择性别'
          this.maleSelected = false
          this.femaleSelected = false
          break;
      }
    }
  },
  methods:{
    changeMaleStatus(){
      this.maleSelected = !this.maleSelected
      if(this.maleSelected){
        this.femaleSelected = false
      }
    },
    changeFemaleStatus(){
      this.femaleSelected = !this.femaleSelected
      if(this.femaleSelected){
        this.maleSelected = false
      }
    },
    changeGender(){
      if(this.maleSelected){
        this.gender = '男'
        this.genderSelected = 1
      } else if(this.femaleSelected){
        this.gender = '女'
        this.genderSelected = 2
      }else{
        this.gender = '请选择性别'
      }
      this.chooseGender = false
      this.$emit('submitGender',this.genderSelected)
    }
  }
  
}
</script>
<style lang="less" >
@import '~vux/src/styles/close';
@media screen and (min-width: 1024px) {
  .weui-dialog {
    width: 80.7%;
  }
} 
#chooseGenderComponent{
  .weui-cell_access.active{
    .weui-cell__ft{
      color: #333!important;
    }
  }
}
.transfer-dom{
  .dialog{
    .weui-dialog{
      width: 80.7% ;
      max-width: 100%;
      border-radius: 10px;
      .top{
        .choose{
          padding-top: 30px ;
          padding-bottom: 32px; 
          color:#333;
          font-size: 30px;
          font-weight: 500;
        }
        .close{
          width: 26px;
          height: 26px;
          float: right;
          position: absolute;
          top: 35px;
          right: 28px;
        }
      }
      .gender-select{
        margin:0 41px;
        padding: 0 92px;
        border-top:1px solid #D9D9D9;/*no*/ 
        display: flex;
        justify-content: space-between;
        .male,
        .female{
          img{
            margin: 44px 0 15px;
            width: 110px;
            height: 110px;
          }
          p{
            color: #666;
            font-size: 28px;
          }
        }
      }
      .confirm-btn{
        width: 63.3%;
        height: 70px;
        margin: 41px auto 45px;
        background-color: #FDC26B;
        border-radius: 35px;
        p{
          color:#fff;
          line-height: 70px;
          font-size: 30px;
          font-weight:500;
        }
      } 
    }
  }
    
}
</style>
